<template>
	<view>
		<view class="mid-content">
			<view :style="{'width':viwidth}" class="content-item" v-for="(item,index) in bottomNavList" :key="item.id"
				@click="child(index)">
				<!-- <router-link :to="{name:item.href,params:{},query:{}}" /> -->
				<text class="nav-span" :class="{'active2':checkInNumber===index}">{{item.name}}</text>
				<view class="nav-view" :class="{'active1':checkInNumber===index}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.child(0)
		},
		props: {
			bottomNavList: Array,
			navLength: Number
		},
		data() {
			return {
				checkInNumber: 0,
				ItemInfo: []
			}
		},
		computed: {
			viwidth() {
				return 100 / (this.navLength) + '%';
			}
		},
		methods: {
			child(arg) {
				this.checkInNumber = arg;
				this.$emit('func',arg)
			}
		}
	}
</script>

<style>
	.mid-content {
		white-space: nowrap;
		height: 89rpx;
		overflow: auto;

	}

	.active1 {
		background-color: red;

	}

	.active2 {
		font-weight: 800;
	}

	.content-item {
		position: relative;
		display: inline-block;
		height: 89rpx;
		text-align: center;
		line-height: 89rpx;
		border-right: 0rpx solid rgba(238, 238, 238, 1);
		font-size: 0;
	}

	.nav-span {
		position: relative;
		top: 4rpx;
		font-size: 28rpx;
		color: #212121;
	}

	.nav-view {
		position: absolute;
		width: 66rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 8rpx;
		border-radius: 4rpx;
	}
</style>
